<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				padding: 10px;   /*内边距*/
				border: 10px solid yellow;
				
			}
			#box3{
				padding: 100px;
				background-color: blue;
			}
			#box4{
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto; 
				
			}
			#box5
			{
				width: 450px;
				height: 600px;
				background-color: yellow;
				/* 保证不溢出 */
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var box1=document.getElementById("box1");
				var btn01=document.getElementById("btn01");
				btn01.onclick=function()
				{
					alert(box1.clientWidth);  //可以直接计算，会获取元素宽度和高度，包括内容区和内边距
					//box1.clientWidth="300px";  //同样是只读的，不能修改 只能通过style去修改
					alert(box1.offsetWidth);    //可以获取元素的整个大小 包括内容区，内边距和边框
					var op=box1.offsetParent;   //会获取到当前元素最近的开启了点位的祖先元素，都没开启，则返回body
					alert(op.id);
					 alert(box1.offsetLeft);      //当前元素相当于其定位元素的水平偏移量
					alert(box1.offsetTop);			//当前元素相当于其定位元素的垂直偏移量  //相对于box3的偏移量
					alert(box4.scrollHeight);       //600如果是clientHeight的话是300  获取整个滚动区域的高度
					alert(box4.scrollWidth);  //450如果是clientWidth的话是200
					alert(box4.scrollLeft);   //获取水平滚动条的距离
					alert(box4.scrollTop);   //获取垂直滚动条的距离
					//当满足scrollHeight-scrollTop=clientHeight  说明垂直滚动到底 
					//当满足scrollWidth-scrollLeft=clientWidth  说明水平滚动到底 
				}
				
				
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我以下</button>
		<p></p>
		<div id="box2" style="position: absolute;">
			<div id="box3" style="position: absolute;">
				<div id="box1"></div>
			</div>
		</div>
		<p></p>
		<div id="box4">
			<div id="box5"></div>
		</div>
	</body>
</html>